<script setup>
import { ref, onMounted, getCurrentInstance, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import qrcode from 'qrcode'
import StatusBar from '../../components/statusBar.vue'

// 获取当前Vue实例
const { proxy } = getCurrentInstance()
// 路由
const router = useRouter()

// 创建信息
const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {},
})

// 表单数据
const HospitalForm = reactive({
  hospital_id: '',
  hospital_name: '',
  demand: '',
  companion_id: '',
  receiveAddress: '',
  tel: '',
  starttime: '',
})

// 就诊医院
const showHospital = ref(false)
// 选择信息
const showHospitalColumns = computed(() => {
  return createInfo.hospitals.map((item) => {
    return {
      text: item.name,
      value: item.id,
    }
  })
})
// 确定医院
function showHospitalConfirm(item) {
  HospitalForm.hospital_id = item.selectedValues[0]
  HospitalForm.hospital_name = item.selectedOptions[0].text
  // 关闭弹出层
  showHospital.value = false
}

// 就诊时间
const showStartTime = ref(false)
// 当前就诊时间
const currentDate = ref()
// 最小日期
const minDate = ref(new Date())
// 确定时间
function showTimeConfirm(item) {
  const dateStr = item.selectedValues.join('-')
  // 当前就诊时间
  currentDate.value = dateStr
  const newDate = new Date(dateStr).getTime()

  // 赋值
  HospitalForm.starttime = newDate
  // 关闭弹出层
  showStartTime.value = false
}

// 陪护师
const showCompanion = ref(false)
// 陪护师的名字
const companionName = ref('')
// 陪护师选择信息
const showCompanionColumns = computed(() => {
  return createInfo.companion.map((item) => {
    return {
      text: item.name,
      value: item.id,
    }
  })
})
// 确定陪护师
function showCompanionConfirm(item) {
  companionName.value = item.selectedOptions[0].text
  HospitalForm.companion_id = item.selectedValues[0]
  // 关闭弹窗
  showCompanion.value = false
}

// 支付弹窗
const showCode = ref(false)
// 二维码地址
const codeImg = ref('')
// 关闭二维码
function closeCode() {
  showCode.value = false
  router.push('/order')
}

// 提交订单
async function submit() {
  const params = [
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime',
  ]

  for (const item of params) {
    if (!HospitalForm[item]) {
      showNotify({ message: '请填写完整' })
      return
    }
  }

  const { data } = await proxy.$api.createOrder(HospitalForm)
  console.log(data)
  qrcode.toDataURL(data.data.wx_code).then((url) => {
    showCode.value = true
    codeImg.value = url
  })
}

// 返回上一级
function goBack() {
  router.go(-1)
}

// 挂载
onMounted(async () => {
  const { data } = await proxy.$api.h5Companion()
  Object.assign(createInfo, data.data)
  console.log(data)
})
</script>

<template>
  <div class="container">
    <div class="header">
      <van-icon
        @click="goBack"
        name="arrow-left"
        class="header-left"
        size="30"
      />
      填写服务订单
    </div>
    <!-- 进度条 -->
    <StatusBar item="0"></StatusBar>
    <!-- 服务内容 -->
    <van-cell class="cell">
      <template #title>
        <van-image
          width="25"
          height="25"
          :src="createInfo.service.serviceImg"
        />
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
    </van-cell>

    <van-cell-group class="cell">
      <!-- 就诊信息 -->
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
          <div @click="showHospital = true">
            {{ HospitalForm.hospital_name || '请选择就诊医院' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <!-- 就诊时间 -->
      <van-cell>
        <template #title>就诊时间</template>
        <template #default>
          <div @click="showStartTime = true">
            {{ currentDate || '请选择就诊时间' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <!-- 陪诊师 -->
      <van-cell>
        <template #title>陪诊师</template>
        <template #default>
          <div @click="showCompanion = true">
            {{ companionName || '请选择陪诊师' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <!-- 接送地址 -->
      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field
            v-model="HospitalForm.receiveAddress"
            placeholder="请输入接送地址"
          >
          </van-field>
        </template>
      </van-cell>
      <!-- 联系电话 -->
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field v-model="HospitalForm.tel" placeholder="请输入联系电话">
          </van-field>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 表单域 -->
    <van-cell-group title="服务需求" class="cell">
      <van-field
        style="height: 100px"
        v-model="HospitalForm.demand"
        placeholder="请输入服务需求"
      >
      </van-field>
    </van-cell-group>

    <!-- 提交按钮 -->
    <van-button type="primary" class="sumbit" size="large" @click="submit"
      >提交订单</van-button
    >

    <!-- 就诊医院弹出层 -->
    <van-popup
      v-model:show="showHospital"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-picker
        title="标题"
        :columns="showHospitalColumns"
        @confirm="showHospitalConfirm"
        @cancel="showHospital = false"
      />
    </van-popup>
    <!-- 就诊时间弹出层 -->
    <van-popup
      v-model:show="showStartTime"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-date-picker
        @confirm="showTimeConfirm"
        @cancel="showStartTime = false"
        title="选择日期"
        :min-date="minDate"
      />
    </van-popup>
    <!-- 陪诊师弹出层 -->
    <van-popup
      v-model:show="showCompanion"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-picker
        title="标题"
        :columns="showCompanionColumns"
        @confirm="showCompanionConfirm"
        @cancel="showCompanion = false"
      />
    </van-popup>

    <!-- 字符二维码 -->
    <van-dialog v-model:show="showCode" :showConfirmButton="false">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image
        width="150"
        height="150"
        :src="codeImg">
      </van-image>
      <div>请使用本人微信支付</div>
    </van-dialog>
  </div>
</template>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }
  .server-name {
    margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 40px;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
